<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script th:src="@{/plugins/My97DatePicker/WdatePicker.js}"></script>
    <title>收支明细详情</title>
    <style type="text/css">
        .modal-dialog {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .nav>li>a:hover, .nav>li>a:active, .nav>li>a:focus {
            background: #56c4bf;
        }
    </style>
</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('收支明细详情','收支明细详情')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <!--查询-->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" id="queryForm" th:action="@{/account/flowList}" method="post" >
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3" >
                                <select class="form-control" name="detailType">
                                    <option value="" disabled="disabled" selected="selected">类型</option>
                                    <option value="">全部</option>
                                    <option value="11">服务费</option>
                                    <option value="21">提现</option>
                                </select>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="orderNo" class="form-control input-sm" placeholder="订单号"/>
                            </div>
                            <div class="col-xs-1">
                                成交起始时间
                            </div>
                            <div class="col-xs-2">
                                <input type="text" th:name="createStartTime" class="form-control input-sm"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd ',maxDate:'%y-%M-%d',readOnly:true});resetWdatePickerPosition(this);"/>
                            </div>
                            <div class="col-xs-1">
                                成交截止时间
                            </div>
                            <div class="col-xs-2">
                                <input type="text" th:name="createEndTime" class="form-control input-sm"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd ',maxDate:'%y-%M-%d',readOnly:true});resetWdatePickerPosition(this);"/>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <input type="hidden" th:name="empId" th:value="${empId}" class="form-control input-sm" />
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-left btn-sm">查询</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>
            </div>


            <div class="box">

                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                    <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">

                        <thead >
                        <tr>
                            <th>成交时间</th>
                            <th>手机号</th>
                            <th>账户名</th>
                            <th>门店名称</th>
                            <th>订单号</th>
                            <th>类型</th>
                            <th>金额</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>

    <!--订单信息tab -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal" id="btn_close" >
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <ul class="nav navbar-nav navbar-left" id="tabs01">
                        <li >
                            <a href="javascript:void(0)" id="firstActive"  style="text-decoration:none;color:white;font-weight:bold;">订单信息</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" style="text-decoration:none;color:white;font-weight:bold;">质检报告</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" style="text-decoration:none;color:white;font-weight:bold;">操作记录</a>
                        </li>
                    </ul>
                </div>

                <div class="modal-body" id="container01">

                    <div class="box-body" id="contentFirst">
                        <table  class="table table-striped table-bordered table-hover table-condensed" id="tableAppend">

                        </table>
                    </div>

                    <div class="box-body" hidden="hidden">
                        <table  class="table table-striped table-bordered table-hover table-condensed" id="tableAppend1">
                            <thead id="theadTable" role="row">
                            <tr>
                                <th class="sorting_disabled">检查项目</th>
                                <th class="sorting_disabled">初始结果</th>
                                <th class="sorting_disabled">复检结果</th>
                                <th class="sorting_disabled">结果</th>
                                <th class="sorting_disabled">展示</th>
                            </tr>
                            </thead>
                        </table>
                    </div>

                    <div class="box-body" hidden="hidden">
                        <table  class="table table-striped table-bordered table-hover table-condensed" id="tableAppend2">
                            <thead id="theadTable1" role="row">
                            <tr class="odd">
                                <th>操作人</th>
                                <th>操作前状态</th>
                                <th>操作</th>
                                <th>操作后状态</th>
                                <th>操作时间</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- DataTables -->
    <script type="text/javascript">

        $(function (){
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                /*pagingType: "full_numbers",*/
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/account/flowList",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'createTimeStr',defaultContent: ""},
                    {"data": 'phone',defaultContent: ""}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"data": 'holderName',defaultContent: ""},
                    {"data": 'storeName',defaultContent: ""},
                    {"data": 'orderNo', defaultContent: ""},
                    {"data": 'detailType', defaultContent: "",
                        "render": function (data, type, full, callback) {
                            if(data==11)
                                return "服务费";
                            else if(data==21)
                                return "提现";
                            else return "暂无";
                        }
                    },
                    {"data": 'exchangeMoneytoString', defaultContent: ""},
                    {"data": '',  defaultContent: ""}

                ],

                /*<![CDATA[*/
                columnDefs: [
                    {
                        targets: -1,//编辑
                        data: null,//下面这行，添加了编辑按钮和，删除按钮
                        defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>收支明细</button>"
                    }
                ],
                dom: '<"toolbar">frtip',
                /*]]>*/

                /*<![CDATA[*/
                //每加载完一行的回调函数
                createdRow: function( row, data, index ) {
                    //修改单元格样式
                    if(data.mainType ==2){
                        $('td', row).eq(6).css("color","red");//获取到具体行具体格的元素
                    }else{
                        $('td', row).eq(6).css("color","green");//获取到具体行具体格的元素
                        $('td', row).eq(7).append("<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>查看详情</button></div>");
                    }

                },
                /*]]>*/

                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },

                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }

            });


            /*<![CDATA[*/
            $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
            /*]]>*/

            //导出按钮
            $("#btn-down").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/account/downloadExcel');
                form.submit();
            });

            var tabs = function(tab, con){
                tab.click(function(){
                    $("#firstActive").css("background","");
                    $("#contentFirst").hide();
                    var indx = tab.index(this);
                    tab.removeClass('active');
                    $(this).addClass('active');
                    con.hide();
                    con.eq(indx).show();
                })
            }


            //查看详情
            $("#dataTable tbody").on("click", "#editRow", function () {

                var data = tables.api().row($(this).parents("tr")).data();
                $("#editModal").modal("show");
                $.ajax({
                    url: '/order/detail',
                    type: 'POST',
                    data: {"orderNo": data.orderNo},
                    dataType: "json",
                    cache: "false",
                    success: function (result) {
                        /*<![CDATA[*/
                        $("#tableAppend").append("<tr><td>订单号："+result[0].orderNo+"</td><td>物品名称："+result[0].goodsName+"</td></td></tr>"+
                            "<tr><td>旧机款	："+result[0].amount+"</td><td>商家服务费："+result[0].busiCharge+"</td></td></tr>"+
                            "<tr><td>店员服务费	："+result[0].clerkCharge+"</td><td>用户姓名："+result[0].sellerName+"</td></td></tr>"+
                            "<tr><td>用户手机号	："+result[0].phoneNo+"</td><td>身份证："+result[0].cardId+"****</td></td></tr>"+
                            "<tr><td>店员名称 ："+result[0].empName+"</td><td>所属门店	："+result[0].storeName+"</td></td></tr>"+
                            "<tr><td>下单时间 ："+result[0].createTimeStr+"</td><td>成交时间	："+result[0].finishTimeStr+"</td></td></tr>"+
                            "<tr><td>快递单号 ："+result[0].trackNumber+"</td><td>发货单号	："+result[0].expressNumber+"</td></td></tr>"+
                            "<tr><td>订单类型："+result[0].transTypeName+"</td><td>订单状态："+result[0].statusName+"</td></td></tr>");
                        /*]]>*/
                        $.each(result[1],function(i,child){
                            if(child.beforeCode ==child.afterCode){
                                /*<![CDATA[*/
                                $("#theadTable").append("<tr class='odd'><td>"+child.propName+"</td><td>"+child.beforeValue+"</td><td>"+child.afterValue+"</td><td><span class='label label-success'>符合</span></td><td></td></tr>");
                                /*]]>*/
                            }else {
                                if(child.afterCode == ""){
                                    /*<![CDATA[*/
                                    $("#theadTable").append("<tr class='odd'><td>"+child.propName+"</td><td>"+child.beforeValue+"</td><td>"+child.afterValue+"</td><td><span class='label label-success'>待确定</span></td><td></td></tr>");
                                    /*]]>*/
                                }else {
                                    /*<![CDATA[*/
                                    $("#theadTable").append("<tr class='odd'><td>"+child.propName+"</td><td>"+child.beforeValue+"</td><td>"+child.afterValue+"</td><td><span class='label label-danger'>不符合</span><td><input type='hidden' name='imageUrl' value='"+child.linkUrl+"'/><button id='btn-query' type='button' class='btn btn-primary pull-left btn-sm' onclick='showPicture(this)'>查看图片"+
                                        "</button></td></tr>");
                                    /*]]>*/
                                }

                            }
                        });
                        $.each(result[2],function(i,child){
                            /*<![CDATA[*/
                            $("#theadTable1").append("<tr class='odd'><td>"+child.operatorName+"</td><td>"+child.beforeName+"</td><td>"+child.memo+"</td><td>"+child.afterName+"</td><td>"+child.createTimeStr+"</td></tr>");
                            /*]]>*/
                        });
                    },
                    error: function (err) {
                        toastr.error("网络错误...");
                    }
                });

                tabs($("#tabs01 a"), $('#container01 .box-body'));
                $("#editModal").modal("show");
                $('#container01 .box-body').hide();
                $("#firstActive").css("background","#56c4bf");
                $("#contentFirst").show();
            });

            //查询按钮
            $("#btn-query").on("click", function () {
                tables.fnDraw();
            });

            $(function () { $('#editModal').on('hide.bs.modal', function () {
                $("#tableAppend tr").remove();
                $("#tableAppend1 tr:gt(0)").remove();
                $("#tableAppend2 tr:gt(0)").remove();
            })
            });

        })
    </script>


</div>
</body>
</html>
